import React, { PureComponent } from 'react'
import { Modal, Form, Input } from 'antd'
// import PropTypes from 'prop-types'

import Style from './editPasswordModal.css'

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class AddModalForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.handleCancel = this.handleCancel.bind(this)
    this.handleOk = this.handleOk.bind(this)
  }

  handleCancel () {
    this.props.handleEditPasswordCancel()
  }
  handleOk () {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.userId = this.props.user.userId
        this.props.handleEditPasswordOk(values)
      }
    })
  }

  render () {
    const { getFieldDecorator, getFieldValue } = this.props.form
    const { visible, user } = this.props

    return (
      <div className={Style['add-modal']}>
        <Modal
          title='修改密码'
          visible={visible}
          width={600}
          onOk={this.handleOk}
          destroyOnClose
          onCancel={this.handleCancel}
        >
          <Form {...formItemLayout}>
            <Form.Item label='用户名'>
              {getFieldDecorator('name', {
                initialValue: user && user.name
                // rules: [{ required: true, message: '请输入成员姓名' }]
              })(
                <Input placeholder='请输入' disabled />
              )}
            </Form.Item>
            <Form.Item label='Email'>
              {getFieldDecorator('email', {
                initialValue: user && user.email
                // rules: [{ required: true, message: '请选择部门' }]
              })(
                <Input placeholder='请输入' disabled />
              )}
            </Form.Item>
            <Form.Item label='旧密码'>
              {getFieldDecorator('oldPassword', { rules: [{ required: true, message: '请输入' }] })(
                <Input placeholder='请输入' type='password' />
              )}
            </Form.Item>

            <Form.Item label='新密码'>
              {getFieldDecorator('newPassword', { rules: [{ required: true, message: '请输入' }] })(
                <Input placeholder='请输入' type='password' />
              )}
            </Form.Item>
            <Form.Item label='确认密码'>
              {getFieldDecorator('checkpassword', {
                rules: [{ required: true, message: '请输入' }],
                validator: (rule, value, callback) => {
                  console.log('2222', rule, value, getFieldValue('newPassword'))
                }
              })(
                <Input placeholder='请输入' type='password' />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

AddModalForm.propTypes = {
}

const addModal = Form.create()(AddModalForm)
export default addModal
